<template>
   <div class="Back">
      <div class="PublishBox blogFont">

         <!-- 头部 -->
         <div class="head flex">
              <div v-if="PublishState == 1 || (PublishState <4 && PublishType == 2)"></div>
              <i v-else class="el-icon-arrow-left"  @click="SETPUBLISHSTATE({index:LastInfo?.PublishState,title:LastInfo?.PublishTitle})"></i>
              <div>{{PublishTitle}}</div>
              <i class="el-icon-close" @click="SETPUBLISHSTATE({index:0,title:null})"></i>
         </div>
          
          <!-- 内容 -->
          <div class="content" >
             
               <!-- 导航 -->
               <PublishNavi v-if="PublishState==1" class="box flex" id="PublishNavi"/>
               <keep-alive :include="KeepAlive">
                  <!-- 图文 -->
                  <ImageText v-if="PublishState==2" class="box flex" id="ImageText"/>
                  <!-- 视频 -->
                  <Video v-if="PublishState==3" class="box flex" id="Video"/>
                  <!-- MarkDown -->
                  <MarkDown v-if="PublishState==4" class="box  overflow-auto-md" id="MarkDown" />
              </keep-alive>            
                <!-- 发布框 -->
                <PublishFrame v-if="PublishState==6" class="box flex" id="PublishFrame"/>

          </div>

          
      </div>

      
      
   </div> 
</template>
<script>
import { mapGetters, mapMutations, mapState } from 'vuex'
import ImageText from './PublishContent/ImageText/ImageText.vue'
import MarkDown from './PublishContent/MarkDown/MarkDown.vue'
import PublishNavi from './PublishNavi/PublishNavi.vue'
import Video from './PublishContent/Video/Video.vue'
import PublishFrame from './PublishFrame/PublishFrame.vue'
  export default 
  {
  components: { PublishNavi, ImageText, Video, MarkDown, PublishFrame },
     name :'', 
     computed:{
       ...mapState('Article',['PublishState','PublishTitle','LastInfo','PublishType']),
       ...mapGetters('Article',['KeepAlive'])
     },
     mounted(){
        this.stopRolling()
     },
     methods:{
        ...mapMutations('Article',['SETPUBLISHSTATE']), //设置发布组件状态
        //滚动的开启与禁止
        stopRolling:() => document.body.style.overflow='hidden',
        starRolling:() => document.body.style.overflow='auto',


     },
     beforeDestroy(){
        this.starRolling()
     }
  }
</script>
<style scoped lang="less">

.PublishBox{
    width: 90vw;
    min-width: 350px;
    background: var(--GeneralBackColor-half);
    max-width: 800px;
    position: relative;
    overflow: hidden;
    box-sizing: border-box;
    border-radius: 15px;

    max-height: 90vh;
}
//头部
.head{
   width:100%;
   height: 50px;
   background: var(--GeneralBackColor);
   color: white;
   font-size: 20px;
   justify-content: space-between;

   padding: 0 10px;
   box-sizing: border-box;
   i{
      border-radius: 50%;
      padding: 5px;
      font-size: 20px;
   }
   i:hover{
      background: rgba(0, 0, 0, 0.5);
   }
}
.content{
   width: 100%;
   height: 500px;
   margin: 10px 0;
   max-height: calc(100vh - 200px);
   box-sizing: border-box;


   overflow: auto;

   .box{
      width: 100%;
      height: 100%;
   }
}
// 图文
#ImageText,#Video{
   padding:0px 20px;
   box-sizing: border-box;
}
#MarkDown{
   width: 100vw;
   height: 100vh;
   position: fixed;
   top: 0;left: 0;
   min-width: 600px;
}
#PublishFrame{
   justify-content: space-between;
    padding:0px 20px;
   box-sizing: border-box;
}
</style>